<template>
  <el-container class="layout-container-demo" style="height: 100vh">
    <el-dialog v-model="dialogFormVisible" title="创建评价" width="1200">
      <el-table :data="commodiyData">
        <el-table-column prop="id" label="商品编号" />
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="wdescribe" label="描述" />
        <el-table-column prop="price" label="价格" />
        <el-table-column prop="shippingAddressId" label="发货地id" />
        <el-table-column prop="shopId" label="商店id" />
        <el-table-column prop="number" label="数量" />
        <el-table-column prop="enable" label="可用" />
        <el-table-column label="评价" width="300">
          <template #default="scope">
            评分: <el-rate v-model="scope.row.score" show-score allow-half text-color="#ff9900">
              {{ scope.row.scope }} 分
            </el-rate>
            评价:<el-input v-model="scope.row.details" autocomplete="off" />
          </template>
        </el-table-column>
      </el-table>


      <el-form :model="evaluateForm" ref="evaluateFormRef" :rules="rules" status-icon>
        <el-form-item label="订单Id" :label-width="formLabelWidth" prop="orderId">
          <el-input v-model="evaluateForm.orderId" autocomplete="off" disabled />
        </el-form-item>
        <!-- <el-form-item label="买家Id" :label-width="formLabelWidth" prop="buyerId">
          <el-input v-model="evaluateForm.buyerId" autocomplete="off" />
        </el-form-item> -->
        <el-form-item label="商品评分List" :label-width="formLabelWidth" prop="commodityScoreList">
          <el-input v-model="evaluateForm.commodityScoreList" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="物流评分" :label-width="formLabelWidth" prop="logisticsScore">
          <!-- <el-input v-model="evaluateForm.logisticsScore" autocomplete="off" /> -->
          <el-rate v-model="evaluateForm.logisticsScore" show-score allow-half text-color="#ff9900">
            {{ evaluateForm.logisticsScore }} 分
          </el-rate>
        </el-form-item>
        <el-form-item label="店铺评分" :label-width="formLabelWidth" prop="shopScore">
          <!-- <el-input v-model="evaluateForm.shopScore" autocomplete="off" /> -->
          <el-rate v-model="evaluateForm.shopScore" show-score allow-half text-color="#ff9900">
            {{ evaluateForm.shopScore }} 分
          </el-rate>
        </el-form-item>
        <el-form-item label="商品评价内容List" :label-width="formLabelWidth" prop="detailsList">
          <el-input v-model="evaluateForm.detailsList" autocomplete="off" disabled />
        </el-form-item>
        <div>
          <el-button @click="resetForm(evaluateFormRef)">
            取消
          </el-button>
          <el-button type="primary" @click="CUEvaluate(evaluateFormRef)">
            确认
          </el-button>
        </div>
      </el-form>
    </el-dialog>
  </el-container>
</template>
  
<script lang="ts" setup>
import { } from "../../api/evaluate/"
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { getCommodityByOrderId } from "../../api/commodity";
import { getEvaluateById, createEvaluateByJwt, updateEvaluateByIdAndJwt } from "../../api/evaluate"


const idd = ref(0);
const orderIdd = ref(0);
//打开本EvaluateCU页
const dialogFormVisible = ref(false)
const openDialog = (id:number,orderId: number) => {
  dialogFormVisible.value = true
  if(!id){
    idd.value = id
  }
  if(!orderId){
    orderIdd.value = orderId
  }
}
defineExpose({
  openDialog
})

// 指定字段宽度属性
const formLabelWidth = '140px'
// 指定地址悬浮展开属性

// 评价表单 
interface evaluateType {
  id: number,
  orderId: number,
  commodityScoreList: string,
  logisticsScore: number,
  shopScore: number,
  detailsList: string,
}

const evaluateFormRef = ref<FormInstance>()
//创建评价表单数据
const evaluateForm = reactive<evaluateType>({
  id: 0,
  orderId: 0,
  commodityScoreList: '',
  logisticsScore: 0,
  shopScore: 0,
  detailsList: ''
})
const rules = reactive<FormRules<evaluateType>>({
  orderId: [
    { required: true, message: '', trigger: 'blur' },
    // { type: 'string', min: 2, max: 10, message: '长度2-10', trigger: 'blur' },
  ],
  commodityScoreList: [
    { required: true, message: '', trigger: 'blur' },
  ],
  logisticsScore: [
    { required: true, message: '', trigger: 'blur' },
  ],
  shopScore: [
    { required: true, message: '', trigger: 'blur' },
  ],
  detailsList: [
    { required: true, message: '', trigger: 'blur' },
  ],

})

// 选择评价后编辑表单
watch(idd, (newVal, oldVal) => {
  if (idd.value != 0) {
    const getEvaluateByIdResult = getEvaluateById({ id: newVal })
    getEvaluateByIdResult.then((res) => {
      if (res.code === 200) {
        //更改表单数据
        evaluateForm.id = res.data.id
        evaluateForm.orderId = res.data.orderId
        evaluateForm.commodityScoreList = res.data.commodityScoreList
        evaluateForm.logisticsScore = res.data.logisticsScore
        evaluateForm.shopScore = res.data.shopScore
        evaluateForm.detailsList = res.data.detailsList
      } else {
        return ElMessage({
          showClose: true,
          message: res.message,
          type: 'error',
        })
      }
    })
  }
}, {
  // 深度监听
  deep: true,
  // 监听对象初次加载时也调用一次方法体
  // immediate: true
})
interface commodityType {
  id: number;
  commodityIdList: string,
  orderId: number,
  buyerId: number,
  commodityScoreList: string,
  logisticsScore: number,
  shopScore: number,
  detailsList: string,
  score: number,
  details: string,
}
let commodiyData: Ref<commodityType[]> = ref([])
//选择订单后更改evaluateForm表单
watch(orderIdd, (newVal, oldVal) => {
  evaluateForm.orderId = newVal;
  const CommodityByShopId = getCommodityByOrderId({
    orderId: newVal
  })
  CommodityByShopId.then((res) => {
    if (res.code === 200) {
      commodiyData.value = res.data
      for (let i = 0; i < res.data.length; i++) {
        // 每项商品初始化评分和评价
        commodiyData.value[i].score = 0
        commodiyData.value[i].details = ''
      }
    }
  })
}, {
  // 深度监听
  deep: true,
  // 监听对象初次加载时也调用一次方法体
  // immediate: true
})

//当商品评分和评价变化时更改evaluateForm表单
watch(commodiyData, (newVal, oldVal) => {
  const scoreList = ref('')
  const detailsList = ref('')
  for (let i = 0; i < commodiyData.value.length; i++) {
    scoreList.value += commodiyData.value[i].score
    detailsList.value += commodiyData.value[i].details
    if (i != commodiyData.value.length - 1) {
      scoreList.value += ","
      detailsList.value += ","
    }
  }
  evaluateForm.commodityScoreList = scoreList.value
  evaluateForm.detailsList = detailsList.value
}, {
  // 深度监听
  deep: true,
  // 监听对象初次加载时也调用一次方法体
  // immediate: true
})

// CU评价
const CUEvaluate = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    // if () {
    //   return ElMessage({
    //     showClose: true,
    //     message: "",
    //     type: 'error',
    //   })
    // }
    if (!valid) {
      return ElMessage({
        showClose: true,
        message: '请检查参数',
        type: 'error',
      })
    }
    console.log(evaluateForm);
    if (id.value == 0) {
      const createEvaluateByJwtResult = createEvaluateByJwt(evaluateForm)
      createEvaluateByJwtResult.then((res) => {
        if (res.code === 200) {
          dialogFormVisible.value = false
          return ElMessage({
            showClose: true,
            message: "创建评论成功",
            type: 'success',
          })
        } else {
          return ElMessage({
            showClose: true,
            message: res.message,
            type: 'error',
          })
        }
      })
    } else {
      const updateEvaluateByIdAndJwtResult = updateEvaluateByIdAndJwt(evaluateForm)
      updateEvaluateByIdAndJwtResult.then((res) => {
        if (res.code === 200) {
          dialogFormVisible.value = false
          return ElMessage({
            showClose: true,
            message: "编辑评论成功",
            type: 'success',
          })
        } else {
          return ElMessage({
            showClose: true,
            message: res.message,
            type: 'error',
          })
        }
      })
    }
  })
}

//页面清空返回
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  dialogFormVisible.value = false
}

</script>
  
<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
  